<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <p>{{total}}</p>
    <!--.native会触发原生事件-->
    <button-counter @listen="Total" @click.native="alert()"></button-counter>
    <button-counter @listen="Total"></button-counter>


    <!--过滤器-->
    <!--差值表达式-->

    {{message | formatText}}

    <!--in v-bind-->
    <div :id="message | formatText"></div>


    <!--计算属性-->
    <div>
        <p>原始数据：{{message}}</p>
        <p>反转数据：{{reservedMessage}}</p>
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <p>姓：{{firstName}} 名：{{lastName}}</p>
        <p>姓名：{{fullName}}</p>
    </div>

</div>


<template id="buttonTemp">
    <button @click="Counter">{{counter}}</button>
</template>

<!--观察者 watchers-->
<div id="example_watch">
    <p>问我一个关于问题，我会告诉你Yes Or No </p>
    <input type="text" v-model="question">
    <p>{{answer}}</p>
</div>


<script src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.17.10/lodash.js"></script>
<script>
    Vue.component('button-counter', {
        template: '#buttonTemp',
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            Counter() {
                this.counter += 1;
                this.$emit('listen')
            }
        },


    })

    let vue = new Vue({
        el: '#app',
        data: {
            total: 0,
            message: "Hello World",
            firstName: "",
            lastName: '',
        },
        methods: {
            Total() {
                this.total += 1;
            },
            alert(){
                alert("234")
            }
        },
        filters: {
            formatText(str) {
                str = str ? str.toString() : ''
                return str;
            }
        },
        computed: {
            reservedMessage() {
                return this.message.split('').reverse().join('')
            },
            now() {
                cache:false;
                return Date.now()
            },
            fullName: {
                get() {
                    return this.firstName + ' ' + this.lastName
                },

                set(newValue) {
                    var names = newValue.split(' ');
                    console.log(names);
                    this.firstName = names[0];
                    this.lastName = names[names.length - 1]
                }

            }
        }
    })

    var watchVm = new Vue({
        el: "#example_watch",
        data: {
            question: '',
            answer: '请先输入一个问题。。。'
        },
        watch: {
            question: function(newQuestion){
                this.answer = '正在输入问题........';
                this.getAnswer();
            }
        },
        methods: {
            getAnswer: _.debounce(
                function(){
                // 如果问题中没有出现问号的话
                if (this.question.indexOf('？') === -1) {
                    this.answer = "输入的问题必须以问号结尾。";
                    return
                }
                this.answer = '思考中...请稍候'
                var vm = this
                axios.get('https://yesno.wtf/api').then((response) => {
                    vm.answer = _.capitalize(response.data.answer)
                }).catch((error) => {
                    vm.answer = '网络错误' + error
                })
            }, 500)
        }
    })

</script>
</body>
</html>